<template>
    <div class="wechat-content-box">
        <div class="attr-item dbtn-text">
            <div class="attr-item-label">微信号</div>
            <div class="block">
                <el-input v-model="content.wechatNumber" size="mini" placeholder="微信号"/>
            </div>
        </div>
        <div class="header-item">
            <div class="attr-item-label">头像</div>
            <div class="header-img-block">
                <ImgList :content="content"/>
            </div>
        </div>
    </div>
</template>

<script>
    import ImgList from '../common/contentstyle/ImgList.vue';

    export default {
        name: 'WeChatContent',
        props: {
            content: {
                type: Object,
                default: _ => {
                    return {
                        wechatNumber: '微信号',
                        url: ''
                    };
                }
            }
        },
        components: {
            ImgList
        },
        data() {
            return {
                dialogVisible: false
            };
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
    }
</script>

<style scoped lang="scss">
    .wechat-content-box {
        .attr-item {
            height: 38px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            margin-top: 10px;

            .attr-item-label {
                padding-right: 15px;
                line-height: 28px;
            }
            .block {
                flex: 1;
            }
        }
        .header-item {
            margin-top: 10px;

            .attr-item-label {
                line-height: 28px;
            }
            .header-img-block {
                .add-header-img {
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 15px;
                    cursor: pointer;
                    font-weight: 600;
                    color: #409EFF;
                    border: 1px solid #409EFF;

                    &:hover {
                        color: #ffffff;
                        background-color: #409EFF;
                    }
                }
            }
        }
    }
</style>
